<template>
  <div>
    <div class="share-btn" @click="getPosterList(false)">
      <div
        class="share-wrap" >
        <img src="https://img.wifenxiao.com/h5-wfx/images/poster.png" alt="">
        <div class="txt">生成海报</div>
      </div>
    </div>
    <div class="j-active-box" v-show="isShowActive">
      <div class="diy-active-box-shade" @click="isShowActive=false"></div>
      <div class="diy-active-boxs">
        <div class="active-content">
          <img :src="poster">
        </div>
        <div class="refresh-btn" @click="getPosterList(true)"><img src="https://img.wifenxiao.com/h5-wfx/images/user/refresh.png">获取最新海报</div>
        <van-button
          v-if="poster != ''"
          class="title"
          @click="saveImg()"
          color="#fff"
          plain
          hairline
          round
          >保存图片</van-button
        >
      <p class="del-btn" @click="isShowActive=false">&times;</p>

      </div>

    </div>
  </div>

</template>
<script>
import {
  getPoster
} from '@/api/loginRegister/index'
import small from '@/smallapp/small'

export default {
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShowActive: false,
      poster: ''
    }
  },
  methods: {
    saveImg() {
      small.saveImage(this.poster)
    },
    getPosterList(update) {
      this.$loadingWrap.show()
      if (this.poster && !update) {
        this.$loadingWrap.close()
        this.isShowActive = true
        return
      }
      getPoster({
        application_type: this.type,
        is_need_update: update || false
      }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.poster = res.data
          this.isShowActive = true
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss">
  .share-btn{
    position: fixed;
    bottom: 200px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    left: 15px;
    background: #fff;
    display: flex;
    color: #333;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
  }
  .share-wrap{
    text-align: center;
    img{
      width: 42px;
      height: 42px;
    }
    .txt{
      font-size: 20px;
    }
  }
.j-active-box{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9997;
  .title {
    display: block;
    font-size: 32px;
    width: 224px;
    height: 76px;
    margin: 48px auto;
    background: #FF4332;
    color: #fff;
    
  }
  .van-popup__close-icon {
    font-size: 28px;
    color: #9d3434;
  }
  .diy-active-box-shade{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 9997;
  }
  .del-btn{
    position: absolute;
    // bottom: 80px;
    left: 50%;
    width: 50px;
    height: 50px;
    color: #fff;
    font-size: 50px;
    line-height: 44px;
    text-align: center;
    transform: translateX(-26px);
    font-family: sans-serif,"Helvetica Neue",Helvetica,STHeiTi;
    z-index: 9999;
    border-radius: 50%;
    border: 1px solid #fff;
  }
  .diy-active-boxs{
    width: 90%;
    height: auto;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 9998;

    .active-content{
      width: 100%;
      height: 90%;
      // overflow: hidden;
      text-align: center;
      img {
        width: 80%;
        object-fit: cover;
      }
    }
  }
}
.refresh-btn {
    // border: 1px solid #fff;
    background:linear-gradient(90deg,rgba(255, 86, 79,1),rgba(255, 149, 98,1));
    color: #fff;
    padding: 20px 30px;
    width: fit-content;
    margin: auto;
    border-radius: 50px;
    font-size: 32px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    img {
      width: 42px;
      margin-right: 10px
    }
}

</style>